<template>
  <view>
    <view class="container" v-if="resData">
      <view class="blank"></view>
      <view class="item">
        <view class="title">食管癌</view>
        <view class="risk">风险等级:
          <text>{{ getRisk(resData.esophagealCancerResult) }}</text>
        </view>
        <view class="risk">{{ resData.esophagealCancerSuggest }}</view>
      </view>
      <view class="blank"></view>
      <view class="item">
        <view class="title">胃癌</view>
        <view class="risk">风险等级:
          <text>{{ getRisk(resData.gastricCancerResult) }}</text>
        </view>
        <view class="risk">{{ resData.gastricCancerSuggest }}</view>
      </view>
      <view class="blank"></view>
      <view class="item">
        <view class="title">结肠癌</view>
        <view class="risk">风险等级:
          <text>{{ getRisk(resData.colonCancerResult) }}</text>
        </view>
        <view class="risk">{{ resData.colonCancerSuggest }}</view>
      </view>
      <view class="blank"></view>
    </view>

    <view v-else class="empty">暂无数据</view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      resData: null,
      riskMap: {
        1: "低风险",
        2: "中等风险",
        3: "高风险"
      }
    }
  },
  onShow() {
    this.resData = uni.getStorageSync("resData") || null
  },
  methods: {
    getRisk(val) {
      return this.riskMap[val]
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f2f2f2;
  height: 100vh;
}

.item {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin: 0 15px;

  .title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 5px 0;
  }

  .risk {
    font-size: 14px;
    color: #666;
    padding: 5px 0;
    line-height: 30px;

    > text {
      padding-left: 10px;
      color: orange
    }
  }
}
</style>